<template>
    <li id="box" @click="handleClick(data.id)">
        <div class="cover">
            <a href="javascript:;">
                <img :src="data.picUrl" alt="">
            </a>
            <div class="bottom">
                <div class="left" v-if="!isPlayList">
                    <i class="iconfont icon-listen"></i>
                    <span>{{ data.playCount > 10000 ? Math.floor(data.playCount / 10000) + '万' : data.playCount }}</span>
                </div>
                <a href="javascript:;" class="right"><i class="iconfont icon-play"></i></a>
            </div>
        </div>
        <div class="describe">
            <h4 v-if="isPlayList">{{ data.copywriter }}</h4>
            <p>{{ data.name }}</p>
        </div>
    </li>
</template>

<script>
export default {
    data() {
        return {
            isPlayList: false
        }
    },
    props: ['data'],
    methods: {
        handleClick(id) {
            this.$router.push({ path: `/recommend/detail/${id}` });
        }
    }
}
</script>

<style lang="scss" scoped>
    #box {
        width: 170px;
        height: 220px;
        padding: 0 0 20px 30px;

        .cover {
            position: relative;
            width: 140px;
            height: 140px;

            &>a {
                display: block;
                height: 100%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .bottom {
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                align-items: center;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 30px;
                padding: 0 5px;
                border-top: 1px solid #000;
                background-color: rgba($color: #000000, $alpha: 0.5);
                color: #ccc;
                font-size: 0.7rem;
                box-shadow: inset 0 1px 3px 1px rgba($color: #ccc, $alpha: 0.3);

                span {
                    margin-left: 3px;
                }

                .right {
                    position: absolute;
                    right: 5px;

                    &:hover {
                        color: #eee;
                    }
                }
            }
        }

        .describe {
            width: 140px;
            height: 60px;

            h4 {
                height: 20px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;

                &:hover {
                    text-decoration: underline;
                }
            }

            p {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;/*显示的行数*/
                overflow: hidden;
                cursor: pointer;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        &:nth-child(7n + 1) {
            width: 140px;
            padding-left: 0;
        }
    }
</style>